<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
        
        <title>Group Documentation</title>
        
        <script src="/js/greyspots.js" type="text/javascript"></script>
        <link href="/css/greyspots.css" type="text/css" rel="stylesheet" />
        
        <script src="/js/ace/ace.js" data-ace-base="/js/ace/" type="text/javascript" charset="utf-8"></script>
        <script src="/js/ace/ext-language_tools.js" type="text/javascript"></script>
        <script src="/js/ace/ext-searchbox.js" type="text/javascript"></script>
        
        <script src="doc-library/doc.js" type="text/javascript"></script>
        <link href="doc-library/doc.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <gs-jumbo>
            <h1 class="text-center">Group</h1>
        </gs-jumbo>
            
        <gs-container padded>
            <h3 class="doc-header">Tag:</h3>
            <pre>&lt;gs-group name="..."&gt;&lt;/gs-group&gt;</pre>
                
            <h3 class="doc-header">Description:</h3>
            <div class="doc-section">
            <p>The <code>gs-group</code> element is used to contain and label a set of related elements.</div>
            
            <h1 class="doc-header">Examples:</h1>
            <div class="doc-section">
                <div class="doc-example-description">
                    <span class="h3">Skeleton Example:</span>
                    <p>A basic <code>gs-group</code> element. The <code>"name"</code> attribute is required and it determines the text for the label below the box.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="15">
                        <gs-group name="Buttons">
                            <gs-button bg-warning inline>Button 1</gs-button>
                            <gs-button bg-danger inline>Button 2</gs-button>
                            <gs-button bg-success inline>Button 3</gs-button>
                            <gs-button bg-info inline>Button 4</gs-button>
                            <gs-button bg-primary inline>Button 5</gs-button>
                            <gs-button inline>Button 6</gs-button>
                            <gs-button inline>Button 7</gs-button>
                        </gs-group>
                    </template>
                </gs-doc-example>
                <div class="doc-example-description">
                    <span class="h3"><code>[padded]</code> Attribute:</span>
                    <p>To put some space around a <code>gs-group</code> element you use the <code>"padded"</code> attribute.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="15">
                        <gs-group name="Buttons" padded>
                            <gs-button bg-warning inline>Button 1</gs-button>
                            <gs-button bg-danger inline>Button 2</gs-button>
                            <gs-button bg-success inline>Button 3</gs-button>
                            <gs-button bg-info inline>Button 4</gs-button>
                            <gs-button bg-primary inline>Button 5</gs-button>
                            <gs-button inline>Button 6</gs-button>
                            <gs-button inline>Button 7</gs-button>
                        </gs-group>
                    </template>
                </gs-doc-example>
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
            </div>
        </gs-container>
    </body>
</html>